
{% extends 'base.html' %}
{% load static %}
{% block title %}界面{% endblock %}
{% block css %}
<link href="{% static 'login.css' %}" rel="stylesheet" />
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        color: #333;
        background-color: #f0f0f0;
    }

    .container {
        max-width: 800px;
        margin: 80px auto;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    h1 {
        font-size: 24px;
        color: #333;
        margin-bottom: 20px;
        text-align: center;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    th,
    td {
        border: 1px solid #ccc;
        padding: 12px;
        text-align: center;
    }

    th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

    tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    tr:hover {
        background-color: #e1e1e1;
    }

    a {
        display: inline-block;
        margin: 10px 0;
        text-decoration: none;
        color: #0099ff;
        padding: 8px 16px;
        //border: 1px solid #0099ff;
        border-radius: 4px;
        transition: background-color 0.3s ease;
    }

    a:hover {
        background-color: #0099ff;
        color: #fff;
    }

    .btn-group a {
        margin-right: 10px;
    }

    .info p {
        font-size: 16px;
        line-height: 1.5;
    }

    .info p span {
        font-weight: bold;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <h1>运行指标页面</h1>

    <div class="btn-group">
        <a href="../cpu">查看CPU服务器信息</a>
        <a href="../memory_usage">查看内存服务器信息</a>
        <a href="../request_count">查看请求数信息</a>
    </div>
</div>

<div class="container">
    <a href="../sysdata" class="btn btn-primary btn-sm">刷新实时信息</a>
    <h1>CPU服务器信息</h1>
    <div class="info">
        <p><span>当前机器学习算法:</span> {{ ml_algorithm }}</p>
        <p><span>CPU 使用率:</span> {{ cpu }}</p>
        <p><span>内存使用率:</span> {{ memory }}</p>
        <p><span>磁盘数量:</span> {{ disk }}</p>
        <p><span>网络状态:</span> {{ network }}</p>
        <p><span>温度:</span> {{ temp }}</p>
        <p><span>预计问题:</span> {{ y_pred_new }}</p>
        <p><span>预计引发原因:</span> {{ reason }}</p>
        <br>
        <p><span>当前优化力度</span> {{ automation_level }}</p>
        <p><span>智能评估采取措施:</span> {{ action }}</p>
    </div>

    <table>
        <tr>
            <th>操作</th>
        </tr>
        <tr>
            <td align="center">
                <div class="btn-group">
                    <a href="../limit/?id={{ sysdata.CPUusage }}" class="btn btn-warning btn-sm">限制CPU使用</a>
                    <a href="../limit/?id={{ sysdata.MEMusage }}" class="btn btn-warning btn-sm">限制内存使用</a>
                    <a href="../unlockCPU/?id={{ sysdata.CPUusage }}" class="btn btn-success btn-sm">解锁CPU使用</a>
                    <a href="../unlockMEM/?id={{ sysdata.MEMusage }}" class="btn btn-success btn-sm">解锁内存使用</a>
                    <a href="../edit/?id={{ sysdata.CPUusage }}" class="btn btn-primary btn-sm">使用writeback模式</a>
                    <a href="../edit/?id={{ sysdata.CPUusage }}" class="btn btn-primary btn-sm">使用缓存技术</a>
                </div>
            </td>
        </tr>
    </table>
</div>
{% endblock %}
